<layout name="popup" />
<block name="content">
	<div class="popup-frame">
		<div class="popup-header">
			<div class="pull-left">
				<label>
					<input   type="radio" id="rb_dept" name="type" value="dept" >
					<span class="lbl">部门</span> </label>
				<label>
					<input    type="radio" id="rb_position" name="type" value="position">
					<span class="lbl">职位</span> </label>
				<label>
					<input   type="radio" id="rb_personal" name="type" value="personal">
					<span class="lbl">个人</span> </label>
				<label>
					<input    type="radio" id="rb_group" name="type" value="group">
					<span class="lbl">用户组</span> </label>
			</div>
			<div class="pull-right">
				<a id="select_all" class="btn">全选</a>
				<a class="btn btn_save" >确定</a>
				<a class="btn btn_close btn-return">关闭</a>
			</div>
		</div>
		<div class="popup-body">
			<div class="popup-body-scroll">
				<div class="popup-content">
					<div class="col-23 pull-left">
						<b class="popup-label">地址簿</b>
						<div class="popup_tree_menu" >
							<div id="dept" class="hidden" style="height:170px;">
								{$list_dept}
							</div>
							<div id="position" class="hidden" style="height:170px;">
								{$list_position}
							</div>
							<div id="group" class="hidden" style="height:170px;">
								{$list_group}
							</div>
							<div id="personal" class="hidden" style="height:170px;">
								<ul class="tree_menu">
									<foreach name="list_personal" val="vo">
										<li>
											<a class="" node="{$key}"><i class="icon level1"></i><span>{$vo}</span></a>
										</li>
									</foreach>
								</ul>
							</div>
						</div>
						<b class="popup-label">&nbsp;</b>
						<div>
							<div id="addr_list" style="width:100%;height:170px;"></div>
						</div>
					</div>
					<div class="col-30 pull-left">
						<div class="col-7 pull-left text-center mid" style="margin-top: 24px;">
							<div style="height: 132px;">
								<a id="add_rc" class="btn"><i class="fa fa-angle-double-right"></i></a>
								<a id="" class="btn btn_save">确定</a>
								<a class="btn btn_close btn-return">关闭</a>
							</div>
							<div style="height:132px;">
								<a id="add_cc" class="btn"><i class="fa fa-angle-double-right"></i></a>
							</div>
							<div style="height:64px;">
								<a id="add_bcc" class="btn"><i class="fa fa-angle-double-right"></i></a>
							</div>
						</div>
						<div class="col-23 pull-left">
							<b class="popup-label">收件人</b><span id="rc_count"></span>
							<div id="rc" class="selected" style="width:100%;height:107px;overflow:hidden">
								<ul></ul>
							</div>
							<b class="popup-label">抄送</b><span id="cc_count"></span>
							<div id="cc" class="selected" style="width:100%;height:107px;overflow:hidden">
								<ul></ul>
							</div>
							<b class="popup-label">密送</b><span id="bcc_count"></span>
							<div id="bcc" class="selected" style="width:100%;height:107px;overflow:hidden">
								<ul></ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</block>
<block name="js">
	<script type="text/javascript">
		var index = parent.layer.getFrameIndex(window.name);
		layui.use(['global'], function() {
			var $ = layui.jquery;

			$("#rb_{$type}").prop('checked', true);
			// 选择用户默认选择的类型
			$("#{$type}").removeClass("hidden");

			function add_address(name) {
				$("input:checked[name='addr_id']").each(function() {
					$text = $(this).next().text().trim();
					$val = $(this).val();
					if ($("#" + name + ".selected li[data='" + $val + "']").length == 0) {
						$li = $('<li><span></span><a class="fa fa-times"></a></li>');
						$li.find('span').text($text);
						$li.attr('data', $val);
						$li.appendTo("#" + name + ".selected ul");
						recount();
					};
				});
				$("#addr_list input:checked").prop('checked', false);
			};

			$('.btn_close').on('click', function() {
				parent.layer.close(index);
			});
			$("#add_rc").on('click', function() {
				add_address('rc');
			});

			$("#add_cc").on('click', function() {
				add_address('cc');
			});

			$("#add_bcc").on('click', function() {
				add_address('bcc');
			});

			// 双击添加到收件人 因后添加的数据 所以需要用live函数
			$(document).on("dblclick", "#addr_list label", function() {
				$text = $(this).text();
				$val = $(this).find("input").val();
				if ($("#rc.selected li[data='" + $val + "']").length == 0) {
					$li = $('<li><span></span><a class="fa fa-times"></a></li>');
					$li.find('span').text($text);
					$li.attr('data', $val);
					$li.appendTo("#rc.selected ul");
					recount();
				};
			});

			function recount() {
				$("#rc_count").text("(" + $("#rc.selected li").length + ")");
				$("#cc_count").text("(" + $("#cc.selected li").length + ")");
				$("#bcc_count").text("(" + $("#bcc.selected li").length + ")");
			};

			$("#select_all").on('click', function() {
				$("input[name='addr_id']").each(function() {
					$text = $(this).next().text();
					$val = $(this).val();
					if ($("#rc.selected li[data='" + $val + "']").length == 0) {
						$li = $('<li><span></span><a class="fa fa-times"></a></li>');
						$li.find('span').text($text);
						$li.attr('data', $val);
						$li.appendTo("#rc.selected ul");
						recount();
					};
					$("input[name='addr_id']").prop('checked', false);
				});
			});

			$(".btn_save").on('click', function() {
				$("#rc.selected li").each(function(i) {
					emp_no = $(this).attr('data');
					name = trim($(this).text());
					name = name.replace(/<.*>/, '');
					html = conv_inputbox_item(name, emp_no);
					$("#recever .address_list", parent.document).append(html);
				});
				$("#cc.selected li").each(function(i) {
					name = trim($(this).text());
					name = name.replace(/<.*>/, '');
					html = conv_inputbox_item(name, emp_no);
					$("#carbon_copy .address_list", parent.document).append(html);
				});
				$("#bcc.selected li").each(function(i) {
					name = trim($(this).text());
					name = name.replace(/<.*>/, '');
					html = conv_inputbox_item(name, emp_no);
					$("#blind_carbon_copy .address_list", parent.document).append(html);
				});
				parent.layer.close(index);
			});

			// 显示AJAX 读取的数据
			function show_data(result) {
				$("#addr_list").html("");
				if ( type = $("input[name='type']:checked").val() == "dept") {
					var id = "dept_" + $("#dept a.active").attr("node");
					var dept_name = $("#dept a.active span").text();
					var name = dept_name + "&lt;dept@group&gt;";
					var html_string = conv_address_item(name, id);
					$("#addr_list").html(html_string);
				}
				for (s in result.data) {
					var id = result.data[s].id;
					var position_name = result.data[s].position_name;
					var emp_no = result.data[s].emp_no;
					var email = result.data[s].email;
					var name = result.data[s].name;
					var name = name + "/" + position_name + "&lt;" + email + "&gt;";
					var html_string = conv_address_item(name, email);
					$("#addr_list").append(html_string);
				}
			};

			$("input[name='type']").on('click', function() {
				$("input[name='type']").each(function() {
					$("#" + $(this).val()).addClass("hidden");
				});
				$("#" + $(this).val()).removeClass("hidden");
			});

			$(".tree_menu a").click(function() {
				$(".tree_menu a").removeClass("active");
				var type = $("input[name='type']:checked").val();
				$(this).addClass("active");
				send_ajax("{:url('read')}", "type=" + type + "&id=" + $(this).attr("node"), function(data) {
					show_data(data);
				});
				return false;
				//禁止连接生效
			});
		});

		//最终确认
		//-->
	</script>
</block>
